<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/echarts.js"></script>
		<style type="text/css">
			.col-md-6 {
				height: 300px;
				width: 50%;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-6 line">

				</div>
				<div class="col-md-6 bar">

				</div>
			</div>
			<div class="row">
				<div class="col-md-6 pie">

				</div>
				<div class="col-md-6 rose">

				</div>
			</div>
			<div class="row">
				<div class="col-md-6 scatter">

				</div>
				<div class="col-md-6 radar">

				</div>
			</div>
			<div class="row">
				<div class="col-md-6 tree">

				</div>
				<div class="col-md-6 geo">

				</div>
			</div>

		</div>
		<script type="text/javascript">
			let data0 = [150, 230, 224, 218, 135, 147];
			//折线图
			const myChart1 = echarts.init(document.querySelector('.line'));
			let option1 = {
				title: {
					text: '粉丝数',
					textAlign: 'auto'
				},
				legend: {
					left: '20%'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				xAxis: {
					type: 'category',
					data: ['1月', '3月', '5月', '7月', '9月', '11月'],
				},
				yAxis: {
					type: 'value',
				},
				series: [{
					name: '新增粉丝数',
					data: data0,
					type: 'line'
				}, {
					name: '新增点赞数',
					data: [50, 300, 240, 189, 35, 47],
					type: 'line'
				}]
			};
			myChart1.setOption(option1);

			//柱状图
			const myChart2 = echarts.init(document.querySelector('.bar'));
			let option2 = {
				title: {
					text: '注册人数'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				legend: {

				},
				xAxis: {
					type: 'category',
					data: ['1月', '3月', '5月', '7月', '9月', '11月', '12月']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: "抖音",
						data: [100, 200, 120, 90, 70, 110, 150],
						type: 'bar',
						itemStyle: {
							borderRadius: 5
						}
					},
					{
						name: "快手",
						data: [120, 100, 50, 80, 90, 120, 130],
						type: 'bar',
						itemStyle: {
							borderRadius: 10
						}
					}
				]
			};
			myChart2.setOption(option2);

			//饼图
			const myChart3 = echarts.init(document.querySelector('.pie'));
			let option3 = {
				title: {
					text: '课程列表'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					left: 'right'
				},
				series: [{
					name: '课程',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: true,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: false,
							fontSize: '40',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: 1048,
							name: 'HTML'
						},
						{
							value: 735,
							name: 'CSS'
						},
						{
							value: 580,
							name: 'JS'
						},
						{
							value: 484,
							name: 'BOOTSTRAP'
						},
						{
							value: 300,
							name: 'JQUERY'
						}
					]
				}]
			};
			myChart3.setOption(option3);

			//玫瑰图
			const myChart4 = echarts.init(document.querySelector('.rose'));
			let option4 = {
				title: {
					text: "德云社"
				},
				legend: {
					top: 'top',
					left: 'right'
				},
				tooltip: {},
				series: [{
					name: '德云社',
					type: 'pie',
					radius: [50, 120],
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					labelLine: {
						length: 5,
						length2: 10
					},
					data: [{
							value: 40,
							name: '郭德纲'
						},
						{
							value: 38,
							name: '于谦'
						},
						{
							value: 32,
							name: '岳云鹏'
						},
						{
							value: 30,
							name: '张鹤伦'
						},
						{
							value: 28,
							name: '郎鹤焱'
						},
						{
							value: 26,
							name: '孙越'
						}
					]
				}]
			};
			myChart4.setOption(option4);

			//散点图
			const myChart5 = echarts.init(document.querySelector('.scatter'));
			let option5 = {
				title: {
					text: '共享单车散点图'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					left: 'right'
				},
				xAxis: {},
				yAxis: {},
				series: [{
						symbol: 'rect',
						symbolSize: 10,
						itemStyle: {
							color: 'orange'
						},
						data: [
							[10.0, 8.04],
							[8.07, 6.95],
							[13.0, 7.58],
							[9.05, 8.81],
							[11.0, 8.33],
							[14.0, 7.66],
							[13.4, 6.81],
							[10.0, 6.33],
							[14.0, 8.96],
							[12.5, 6.82],
							[9.15, 7.2],
							[11.5, 7.2],
							[3.03, 4.23],
							[12.2, 7.83],
							[2.02, 4.47],
							[1.05, 3.33],
							[4.05, 4.96],
							[6.03, 7.24],
							[12.0, 6.26],
							[12.0, 8.84],
							[7.08, 5.82],
							[5.02, 5.68]
						],
						type: 'scatter'
					},
					{
						type: 'effectScatter',
						symbolSize: 15,
						data: [8.33],
						rippleEffect: {
							number: 3,
							scale: 2.5,
							brushStyle: 'stroke'
						}
					}
				]
			};
			myChart5.setOption(option5);

			const myChart6 = echarts.init(document.querySelector('.radar'));
			let option6 = {
				title: {
					text: '项目人员'
				},
				legend: {
					left: 'right'
				},
				radar: {
					// shape: 'circle',
					indicator: [{
							name: '销售（sales）',
							max: 6500
						},
						{
							name: '管理（Administration）',
							max: 16000,
							color: 'red'
						}, // 标签设置为红色
						{
							name: '信息技术（Information Techology）',
							max: 30000
						},
						{
							name: '客服（Customer Support）',
							max: 38000
						},
						{
							name: '研发（Development）',
							max: 52000
						},
						{
							name: '市场（Marketing）',
							max: 25000
						}
					]
				},
				series: [{
					name: 'Budget vs spending',
					type: 'radar',
					data: [{
							value: [4200, 3000, 20000, 35000, 50000, 18000],
							name: '薪资'
						},
						{
							value: [5000, 14000, 28000, 26000, 42000, 21000],
							name: '人数'
						}
					]
				}]
			};
			myChart6.setOption(option6);

			const myChart7 = echarts.init(document.querySelector('.tree'));
			let data = {
				name: '前端技术',
				children: [{
						name: "HTML"
					},
					{
						name: "CSS"
					},
					{
						name: "JS",
						children: [{
								name: "变量"
							},
							{
								name: "语句"
							}
						]
					},
					{
						name: "JQUERY"
					}
				]
			}
			let option7 = {
				title: {
					text: "课程结构"
				},
				tooltip: {
					trigger: 'item',
					triggerOn: 'mousemove'
				},
				series: [{
					type: 'tree',
					data: [data],
					top: '1%',
					left: '10%',
					bottom: '1%',
					right: '20%',
					symbolSize: 7,
					label: {
						position: 'left',
						verticalAlign: 'middle',
						align: 'right',
						fontSize: 12
					},
					leaves: {
						label: {
							position: 'right',
							verticalAlign: 'middle',
							align: 'left'
						}
					},
					emphasis: {
						focus: 'descendant'
					},
					expandAndCollapse: true,
					animationDuration: 550,
					animationDurationUpdate: 750
				}]
			}
			myChart7.setOption(option7);
			
			const myChart = echarts.init(document.querySelector('.geo'));
			
			var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json";
			
			/**
			此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
			
			默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
			当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
			
			http://echarts.baidu.com/option.html#series-map.geoIndex
			
			并且加了pin气泡图标以示数值大小
			*/
			var points = [
			                  {value: [118.8062, 31.9208],itemStyle:{color:'#4ab2e5'}}
			                  , {value: [127.9688, 45.368],itemStyle:{color:'#4fb6d2'}}
			                  , {value: [110.3467, 41.4899],itemStyle:{color:'#52b9c7'}}
			                  , {value: [125.8154, 44.2584],itemStyle:{color:'#5abead'}}
			                  , {value: [116.4551, 40.2539],itemStyle:{color:'#f34e2b'}}
			                  , {value: [123.1238, 42.1216],itemStyle:{color:'#f56321'}}
			                  , {value: [114.4995, 38.1006],itemStyle:{color:'#f56f1c'}}
			                  , {value: [117.4219, 39.4189],itemStyle:{color:'#f58414'}}
			                  , {value: [112.3352, 37.9413],itemStyle:{color:'#f58f0e'}}
			                  , {value: [109.1162, 34.2004],itemStyle:{color:'#f5a305'}}
			                  , {value: [103.5901, 36.3043],itemStyle:{color:'#e7ab0b'}}
			                  , {value: [106.3586, 38.1775],itemStyle:{color:'#dfae10'}}
			                  , {value: [101.4038, 36.8207],itemStyle:{color:'#d5b314'}}
			                  , {value: [103.9526, 30.7617],itemStyle:{color:'#c1bb1f'}}
			                  , {value: [108.384366, 30.439702],itemStyle:{color:'#b9be23'}}
			                  , {value: [113.0823, 28.2568],itemStyle:{color:'#a6c62c'}}
			                  , {value: [102.9199, 25.46639],itemStyle:{color:'#96cc34'}}
			                  , {value: [119.4543, 25.9222]}
			  ]
			// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
			myChart.showLoading();
			      let index = -1;
			      
			$.getJSON(uploadedDataURL, function(geoJson) {
			    
			    echarts.registerMap('china', geoJson);
			    myChart.hideLoading();
			    option = {
			        backgroundColor: '#013954',
			     /*   title: {
			            top: 20,
			            text: '“困难人数” - 杭州市',
			            subtext: '',
			            x: 'center',
			            textStyle: {
			                color: '#ccc'
			            }
			        },*/
			
			        // tooltip: {
			        //     trigger: 'item',
			        //     formatter: function(params) {
			        //         console.log(params)
			        //             return params.name + ' : ' + params.value[2];
			        //     }
			        // },
			       /*visualMap: {
			          min: 0,
			          max: 1000000,
			          right: 100,
			          seriesIndex: 1,
			          type: 'piecewise',
			          bottom: 100,
			          textStyle: {
			            color: '#FFFF'
			          },
			          splitList: [
			            {
			              gt: 50000,
			              color: '#F5222D',
			              label: '困难人数大于5万人'
			            }, //大于5万人
			            {
			              gte: 30000,
			              lte: 50000,
			              color: '#FA541C ',
			              label: '困难人数3-5万人'
			            }, //3-5万人
			            {
			              gte: 10000,
			              lte: 30000,
			              color: '#FA8C16',
			              label: '困难人数1-3万人'
			            }, //1-3万人
			            {
			              lte: 10000,
			              color: '#fbe1d6',
			              label: '困难人数小于1万人'
			            }
			          ]
			        },*/
			
			        geo: {
			            map: 'china',
			          aspectScale: 0.75, //长宽比
			          zoom: 1.1,
			          roam: false,
			          itemStyle: {
			            normal: {
			              areaColor: {
			                        type: 'radial',
			                        x: 0.5,
			                        y: 0.5,
			                        r: 0.8,
			                        colorStops: [{
			                            offset: 0,
			                            color: '#09132c' // 0% 处的颜色
			                        }, {
			                            offset: 1,
			                            color: '#274d68'  // 100% 处的颜色
			                        }],
			                        globalCoord: true // 缺省为 false
			                    },
			              shadowColor:'rgb(58,115,192)',
			              shadowOffsetX: 10,
			              shadowOffsetY: 11
			            },
			            emphasis: {
			              areaColor: '#2AB8FF',
			              borderWidth: 0,
			              color: 'green',
			              label: {
			                show: false
			              }
			            }
			          },
			          regions: [{
			            name: '南海诸岛',
			            itemStyle: {
			                areaColor: 'rgba(0, 10, 52, 1)',
			
			                borderColor: 'rgba(0, 10, 52, 1)',
			                normal: {
			                    opacity: 0,
			                    label: {
			                        show: false,
			                        color: "#009cc9",
			                    }
			                }
			            },
			
			
			        }],
			        },
			        series: [ {
			            type: 'map',
			            roam: false,
			            label: {
			                normal: {
			                    show: true,
			                    textStyle: {
			                        color: '#1DE9B6'
			                    }
			                },
			                emphasis: {
			                    textStyle: {
			                        color: 'rgb(183,185,14)'
			                    }
			                }
			            },
			
			            itemStyle: {
			              normal: {
			               borderColor: 'rgb(147, 235, 248)',
			                borderWidth: 1,
			                areaColor: {
			                        type: 'radial',
			                        x: 0.5,
			                        y: 0.5,
			                        r: 0.8,
			                        colorStops: [{
			                            offset: 0,
			                            color: '#09132c' // 0% 处的颜色
			                        }, {
			                            offset: 1,
			                            color: '#274d68'  // 100% 处的颜色
			                        }],
			                        globalCoord: true // 缺省为 false
			                    },
			              },
			              emphasis: {
			                    areaColor: 'rgb(46,229,206)',
			                //    shadowColor: 'rgb(12,25,50)',
			                    borderWidth: 0.1
			                }
			            },
			            zoom: 1.1,
			       //     roam: false,
			            map: 'china' //使用
			            // data: this.difficultData //热力图数据   不同区域 不同的底色
			          },{
			                type: 'effectScatter',
			                coordinateSystem: 'geo',
			                showEffectOn: 'render',
			                zlevel:1,
			                rippleEffect: {
			                    period: 15,
			                    scale: 4,
			                    brushType: 'fill'
			                },
			                hoverAnimation: true,
			                label: {
			                    normal: {
			                        formatter: '{b}',
			                        position: 'right',
			                        offset: [15, 0],
			                        color: '#1DE9B6',
			                        show: true
			                    },
			                },
			                itemStyle: {
			                    normal: {
			                       color:'#1DE9B6'/* function (value){ //随机颜色
			 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
			 }*/,
			                        shadowBlur: 10,
			                        shadowColor: '#333'
			                    }
			                },
			                symbolSize: 12,
			                data: points
			            }, //地图线的动画效果
			          {
			                type: 'lines',
			                zlevel: 2,
			                effect: {
			                    show: true,
			                    period: 4, //箭头指向速度，值越小速度越快
			                    trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
			                    symbol: 'arrow', //箭头图标
			                    symbolSize: 7, //图标大小
			                },
			                lineStyle: {
			                    normal: {
			                        color:'#1DE9B6'
			                        /* function (value){ //随机颜色
			                        
			                        ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
			                        '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
			                        '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
			                        '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
			                        '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
			                        '#52b9c7','#4fb6d2','#4ab2e5']
			 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
			 }*/,
			                        width: 1, //线条宽度
			                        opacity: 0.1, //尾迹线条透明度
			                        curveness: .3 //尾迹线条曲直度
			                    }
			                },
			                data: [
			                    {coords: [[118.8062, 31.9208],[119.4543, 25.9222]],lineStyle:{color:'#4ab2e5'}}
			                  , {coords: [[127.9688, 45.368],[119.4543, 25.9222]],lineStyle:{color:'#4fb6d2'}}
			                  , {coords: [[110.3467, 41.4899],[119.4543, 25.9222]],lineStyle:{color:'#52b9c7'}}
			                  , {coords: [[125.8154, 44.2584],[119.4543, 25.9222]],lineStyle:{color:'#5abead'}}
			                  , {coords: [[116.4551, 40.2539],[119.4543, 25.9222]],lineStyle:{color:'#f34e2b'}}
			                  , {coords: [[123.1238, 42.1216],[119.4543, 25.9222]],lineStyle:{color:'#f56321'}}
			                  , {coords: [[114.4995, 38.1006],[119.4543, 25.9222]],lineStyle:{color:'#f56f1c'}}
			                  , {coords: [[117.4219, 39.4189],[119.4543, 25.9222]],lineStyle:{color:'#f58414'}}
			                  , {coords: [[112.3352, 37.9413],[119.4543, 25.9222]],lineStyle:{color:'#f58f0e'}}
			                  , {coords: [[109.1162, 34.2004],[119.4543, 25.9222]],lineStyle:{color:'#f5a305'}}
			                  , {coords: [[103.5901, 36.3043],[119.4543, 25.9222]],lineStyle:{color:'#e7ab0b'}}
			                  , {coords: [[106.3586, 38.1775],[119.4543, 25.9222]],lineStyle:{color:'#dfae10'}}
			                  , {coords: [[101.4038, 36.8207],[119.4543, 25.9222]],lineStyle:{color:'#d5b314'}}
			                  , {coords: [[103.9526, 30.7617],[119.4543, 25.9222]],lineStyle:{color:'#c1bb1f'}}
			                  , {coords: [[108.384366, 30.439702],[119.4543, 25.9222]],lineStyle:{color:'#b9be23'}}
			                  , {coords: [[113.0823, 28.2568],[119.4543, 25.9222]],lineStyle:{color:'#a6c62c'}}
			                  , {coords: [[102.9199, 25.46639],[119.4543, 25.9222]],lineStyle:{color:'#96cc34'}}
			                ]
			            }
			
			        ]
			    };
			    myChart.setOption(option,true);
			});
		</script>
	</body>
</html>
